<template lang='pug'>
.user-list 
    .user-list-top
        h3  用户评论
        span(@click="gotoInt") 好评率99.4% >
    ul.user-aul
        li 有图
        li 颜值够高
        li 手感一流
        li 运行稳定
        li 价格实惠
    ul
    .bnner
        Swiper(:options="swiperOptions")
            SwiperSlide(v-for="d in userList" :key="d.id")
                .okwrap(@click="taoFn(d.id)")
                    .user-fir-top
                        img.userimg(:src="d.userimg")
                        .user-right
                            p 你好
                            time {{d.time?d.time.split('T')[0]:new Date().toLocaleDateString()}}
                    .user-fir-top
                        section {{d.content.substring(1,30)}}...
                    ul.aul-user
                        li(v-for="item in d.covers")
                            img(:src="item")
            
</template>
 
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "vueName",
  data() {
    return {
      msg: "Welcome to your vueName",
      userList: [],
      swiperOptions:{

      }
    };
  },
  methods:{
      fn(arr){
        return arr = arr.map((item) => {
            if(item.covers!=null){
                return  {
                    id: item.id,covers: item.covers.split(','),userimg: item.userimg,time: item.time,username: item.username,content: item.content,type: item.type
                }
            }else{
                return {
                    id: item.id,covers: null,userimg: item.userimg,time: item.time,username: item.username,content: item.content,type: item.type
                }
            }
        });
      },
      taoFn(id){
          this.$router.push('/listpl?id='+id)
          console.log(id)
      },
      gotoInt(){
          this.$router.push('/commentList')
          this.$store.commit("setIsShow", false);
      }
  },    
 
  components: {
    Swiper,  //大盒子
    SwiperSlide  //每一项
  },
  mounted() {
    this.$http.get('http://192.168.43.168:8082/user/userlistfilter?type=手感一流').then(({data})=>{
        this.userList = this.fn(data)
        console.log('---------------',this.userList)
    })
  },
};
</script>
 
<style scoped lang="sass">
.user-list
    width: 100%
    padding: .2rem
    background: #fff
    .user-list-top 
        display: flex
        justify-content: space-between
        h3 
            font-weight: bold
            font-size: .14rem
        span 
            font-size: .12rem
            color: #ccc
    .user-aul
        width: 100%
        display: flex
        flex-wrap: wrap
        li
            background: #ffeeea
            font-size: .14rem
            padding: 0 .1rem
            margin: .05rem
            border-radius: .1rem
    .bnner
        width: 100%
        .okwrap
            border: .016rem solid #e5e5e5
            border-radius: .1rem
            margin-right: .2rem
            .user-fir-top
                width: 100%
                padding: .1rem
                display: flex
                .userimg
                    width: .333rem
                    height: .333rem
                    border-radius: 50%
                .user-right
                    margin-left: .1rem
                    p
                        font-size: .14rem
                    time 
                        color: rgba(0,0,0,.3)
                        font-size: .12rem
            .aul-user
                display: flex
                li
                    width: 31%
                    height: .79rem
                    margin: .1rem
                    img
                        width: 100%
                        height: 100%
                        border-radius: .05rem

</style>